<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no, email=no"/>
<meta charset="UTF-8">
<title>${shop.shopName }</title>
<link rel="stylesheet" href="/apollo/css/aui/core.css">
<link rel="stylesheet" href="/apollo/css/aui/icon.css">
<link rel="stylesheet" href="/apollo/css/aui/home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
<style>
  /*toast*/
.aui-toast {
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	border-radius: 0.25rem;
	color: #ffffff;
	position: fixed;
	z-index: 3;
	top: 45%;
	left: 50%;
	width: 7.5em;
	min-height: 6em;
	margin-left: -3.75em;
	margin-top: -4rem;
	display: none;
}
.aui-toast .aui-iconfont {
	margin-top: 0.2rem;
	display: block;
	font-size: 2.6rem;
}
.aui-toast-content {
  margin: 0 0 0.75rem;
}
.aui-toast-loading {
    background-color: #ffffff;
    border-radius: 100%;
    margin: 0.75rem 0;
    -webkit-animation-fill-mode: both;
        	animation-fill-mode: both;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    height: 2.25rem;
    width: 2.25rem;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 1s 0s linear infinite;
        	animation: rotate 1s 0s linear infinite;
}
@font-face {
	font-family: "aui_iconfont";
	src: url('aui-iconfont.ttf') format('truetype');
}
.aui-iconfont {
	position: relative;
	font-family:"aui_iconfont" !important;
	font-size: 0.7rem;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.aui-icon-laud:before { content: "\e64b"; }
.blank.cartBlank .box i {
    height: 118px;
    
}

.block {
    display: block;
}
</style>
</head>
<body>
<header class="aui-header-default aui-header-fixed aui-header-bg"> <a href="javascript:history.back(-1)" class="aui-header-item"> <i class="aui-icon aui-icon-back-white"></i> </a>
  <div class="aui-header-center aui-header-center-clear">
    <div class="aui-header-center-logo">
      <div class="aui-car-white-Typeface">购物车(${fn:length(buyCars) })</div>
    </div>
  </div>
  <a href="#" class="aui-header-item-icon"   style="min-width:0"> <i class="aui-icon aui-icon-member"></i> </a> 
</header>

<section class="aui-car-content">
  <div class="aui-car-box">
  <c:if test="${fn:length(buyCars)>0}">
    <div class="aui-car-box-name">
      <input type="checkbox" class="check goods-check shopCheck">
      <h3> <a href="#">商品清单</a> </h3>
      <div class="aui-car-coupons"> <a href="#">编辑</a> </div>
    </div>
  </c:if>
    <div class="aui-car-box-list">
      <ul>
      <form id="form" action="/wechat/shop/saveBilling" method="post">
      <input name="shopId" type="hidden" value="${shopId}">
      <input name="openId" type="hidden" value="${wechatLoginModel.openId}">
      <input name="nickName" type="hidden" value="${wechatLoginModel.nickName}">
      <input name="customerId" type="hidden" value="${customer.customerId}">
      <input id="billingMoney" name="billingMoney" type="hidden" value="">
      <c:forEach var="buyCar" items="${buyCars}" >      
        <li>
          <div class="aui-car-box-list-item">
            <input type="checkbox" class="check goods-check goodsCheck">
            <div class="aui-car-box-list-img"> 
	            <a href="ui-product.html"> 
	           
	            	<c:if test="${buyCar.collocation.cargo.fileId==null }">
						<img src="" style="height:90px;width:90px;text-align:center"  alt="暂无图片">
					</c:if>	
					<c:if test="${buyCar.collocation.cargo.fileId!=null }">
						<img name="pictureLoad" data-url="${tfile:getImageUrl(buyCar.collocation.cargo.fileId)}" style="height:90px;width:90px"  alt="">
					</c:if>	
	            </a> 
            </div>
            <div class="aui-car-box-list-text">
              <h4> <a href="ui-product.html">${buyCar.collocation.cargo.cargoName}</a></h4>
              <input name="collocationIds" type="hidden" value="${buyCar.collocation.collocationId }">
              <input name="cargoIds" type="hidden" value="${buyCar.collocation.cargoId }">
              <input name="units" type="hidden" value="${buyCar.collocation.cargo.unit }">
              <div class="aui-car-box-list-text-brief"> 
              	<p style="padding-top:0px">${buyCar.collocation.propertyNameOne }</p>
              	 <p>${buyCar.collocation.propertyNameTwo }</p> 
              </div>
              <div class="aui-car-box-list-text-price">
                <div class="aui-car-box-list-text-pri"> ￥<b class="price">${buyCar.collocation.salePrice }</b> </div>
                 <input name="salePrices" type="hidden" value="${buyCar.collocation.salePrice }">
                <div class="aui-car-box-list-text-arithmetic"> 
                	<a href="javascript:;" class="minus"></a> 
                	<span class="num">${buyCar.buyNum }</span>
                	<input class="buyNums" name="buyNums" type="hidden" value="${buyCar.buyNum}"> 
                	<a href="javascript:;" class="plus"></a> 
                </div>
              </div>
            </div>
          </div>
        </li>
       
        </c:forEach>
        </form>
      </ul>
    </div>
    
  </div>
</section>
<c:if test="${fn:length(buyCars)==0}">
<div style="height:300px;width:100%;font-weight: normal;">
	<i class="block" style="background: url(/apollo/images/shopCart.png) no-repeat center center;height:118px;width:165px;display:block;margin: 0 auto;background-size: cover; "></i>
	<p class="text" style="text-align: center;font-size: 1.4rem;margin: 25px 0 20px 0;display: block;">您的购物车还没有商品！</p>
	<a href="/apollo/wechat/shop/find?shopId=${shopId}" class=""><button class="btn block" style="margin: 0 auto;display: block;width: 142px;height: 47px;border-radius: 24px;text-align: center;color: #fff;font-size: 1.2rem;border: none;background: linear-gradient(90deg,#fe566f 0%,#fe7956 100%);box-shadow: 0 5px 5px #feaab7">去逛逛</button></a>
</div>
</c:if>
<div style="height:100px"></div>
<c:if test="${fn:length(buyCars)>0}">
<div class="aui-payment-bar">
  <div class="all-checkbox">
    <input type="checkbox" class="check goods-check" id="AllCheck">全选
  </div>
  <div class="shop-total"> <strong>合计：<i class="total" id="AllTotal">0.00</i></strong></div>
  <a  class="settlement" onclick="saveBilling()">下单</a> 
</div>
</c:if>
<footer class="aui-footer-default aui-footer-fixed"> 
	<a href="/apollo/wechat/shop/shop?shopId=${shopId}&searchMark=${searchMark}" class="aui-footer-item"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span> 
		<span class="aui-footer-item-text">首页</span> 
	</a> 
	 
	<a href="/apollo/wechat/shop/find?shopId=${shopId}&searchMark=${searchMark}" class="aui-footer-item"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-find"></span> 
		<span class="aui-footer-item-text">商品</span> 
	</a>
	<a href="/apollo/wechat/shop/car?shopId=${shopId}&searchMark=${searchMark}" class="aui-footer-item   aui-footer-active"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span> 
		<span class="aui-footer-item-text">购物车</span> </a> 
	<a href="/apollo/wechat/shop/me?shopId=${shopId}&searchMark=${searchMark}" class="aui-footer-item"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span> 
		<span class="aui-footer-item-text">我的</span> 
	</a> 
</footer>
<script src="/apollo/js/common/jquery.min.js"></script> 
<script src="/apollo/js/aui/aui-car.js"></script>
<script type="text/javascript" src="/apollo/js/aui/aui-toast.js"></script> 
<script type="text/javascript">

function saveBilling(){
	var parm=$("form:first").serialize();
	var url =$.getVirtualPath()+"/wechat/shop/saveBilling";
    $.ajax({
        type: 'post',
        dataType: "json",
        url: url,
        data: parm,
        async: false,
        success: function (result) {
        	if(result!=null){
        		if(result.resultType=="success"){
        			showDefault("success"); 
        			window.location.reload();
        		}
    		}
       	}
    });
}


window.onload=function (){
	pictureLoad();
}
function pictureLoad(){
	$("img[name='pictureLoad']").each(function(){
	    var url=$(this).data("url");
	    $(this).attr("src",url);
	});
}

var toast = new auiToast();
function showDefault(type){
    switch (type) {
    case "success":
        toast.success({
            title:"下单成功！",
            duration:2000
        });
        break;
        case "fail":
            toast.fail({
                title:"提交失败",
                duration:2000
            });
            break;
        case "custom":
            toast.custom({
                title:"提交成功",
                html:'<i class="aui-iconfont aui-icon-laud"></i>',
                duration:2000
            });
            break;
      
        default:
            
            break;
    }
}
</script>
</body>
</html>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp" %>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>